import React,{useState, CSSProperties } from 'react';
import { Button, ConfigProvider, Flex, Tooltip , FloatButton, Divider, Radio, Segmented  } from 'antd';
import type { FlexProps, SegmentedProps  } from 'antd';
import   {QuestionCircleOutlined, LogoutOutlined} from '@ant-design/icons';
// import logo from './logo.svg';
import './App.css';

const baseStyle: CSSProperties = {
  width:'25%',
  height: 54,
}
const flexWrapStyle: CSSProperties = {
  width: '100%',
  height: 120,
  borderRadius: 6,
  border: '1px solid #40a9ff',
}

const justifyOptions = [
  'flex-start',
  'center',
  'flex-end',
  'space-between',
  'space-around',
  'space-evenly',
];

const alignOptions = ['flex-start', 'center', 'flex-end'];

const App: React.FC =()=>{
  const [flexType, setFlexType] = useState<string>('horizontal');
  const [justify, setJustify] = useState<FlexProps['justify']>(justifyOptions[0]);
  const [alignItems, setAlignItems] = useState<FlexProps['align']>(alignOptions[0]);
  return <ConfigProvider 
    theme={{ token: {
      colorPrimary:'#00ff00'
    }}}>
      {/* gap: small\middle */}
    <Flex gap='middle' wrap='wrap' vertical>
      <Radio.Group value={flexType} onChange={(e)=>setFlexType(e.target.value)}>
        <Radio value={'horizontal'}>horizontal</Radio>
        <Radio value={'vertical'}>vertical</Radio>
      </Radio.Group>
      <Flex  gap='small' vertical={flexType === 'vertical'} >
        <Tooltip title="button tooltip" >
          <Button type='primary'>button primary</Button>
        </Tooltip>
        <Button type='dashed'>dashed</Button>
        <Button type='text' danger>text</Button>
        <Button type='link' style={{ ...baseStyle}} >link</Button>
      </Flex>
    </Flex>

    <Divider dashed></Divider>

    <Flex gap='middle' align='start' vertical>
      <p>select justify:</p>
      <Segmented options={justifyOptions} onChange={setJustify as SegmentedProps['onChange']}></Segmented>
      <p>select align:</p>
      <Segmented options={alignOptions} onChange={setAlignItems as SegmentedProps['onChange']}></Segmented>
      <Flex style={flexWrapStyle} justify={justify} align={alignItems} >
        <Button type="primary">Primary</Button>
        <Button type="primary">Primary</Button>
        <Button type="primary">Primary</Button>
        <Button type="primary">Primary</Button>
      </Flex>
    </Flex>
    <Divider dashed></Divider>

    <LogoutOutlined />
    <FloatButton 
        onClick={()=>{console.log('onclick')}}
        icon={<QuestionCircleOutlined />} type="primary"
        > FloatButton  </FloatButton>

  </ConfigProvider>;
}
export default App;
